<template>
	<view class="container">
		<view class="list">
			<view class="item" :class="{'active':currentIndex === index}" v-for="(item,index) in list" :key="index"
				@click="getSubList(item,index)">{{ item.course_name }}</view>
		</view>
		<view class="detail">
			<view class="box">
				<view class="add-wx">
					<view class="icon">
						<u-icon name="chat" color="#2979ff" size="28"></u-icon>
					</view>
					<view class="text">
						<view class="title">加入班级课程微信群</view>
						<view class="desc">加入班级群和老师同学们一起交流吧！</view>
					</view>
					<view class="button">
						<u-button text="立即加入" size="mini" @click="joinGroup"></u-button>
					</view>
				</view>
				<view v-for="(item,index) in subList" :key="index" class="sub-list">
					<view class="item">
						<view class="study-status">

							<view class="crown-icon">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/crown-light.png" v-if="haseCrown(item)">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/crown-gray.png" v-else>
							</view>
							<view class="star-icon">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/star-light.png" v-if="haseStar(item)">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/start-gray.png" v-else>
							</view>

							<view class="is-finish">
								{{ finishText(item) }}
							</view>

						</view>
						<view class="content">
							<view class="name">{{ item.course_question_set_name }}</view>
							<view class="teacher">主讲：{{ item.speaker }}</view>
							<view class="buttons">
								<u-button @click="handleClickButton(item,1)" type="default" color="#818181" :plain="true"
									size="mini" text="课前习题"></u-button>
								<u-button @click="handleClickButton(item,2)" type="default" color="#818181" :plain="true"
									size="mini" text="听课"></u-button>
								<u-button @click="handleClickButton(item,3)" type="default" color="#818181" :plain="true"
									size="mini" text="课后习题"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="return-button" @click="onReturn">返回</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {},
				info: {
					speaker: '',
					course_name: ''
				},
				list: [],
				subList: [],
				currentIndex: 0,
				current: null
			}
		},
		onShareAppMessage(res){
			return this.$utils.onShareAppMessage();
		},
		onLoad(option) {
			this.option = option;
		},
		onShow(){
			this.getList();
		},
		filters: {
			formatFinish(val) {
				return val == 0 ? '没看' : '完成'
			}
		},
		methods: {
			async getList() {
				const res = await this.$http.get(`/wechatmini/courses?course_id=${this.option.id}`)
				this.list = res.data.course_list;
				let index = this.currentIndex;
				this.list.forEach((item,key)=>{
					if(item.course_id == this.option.id){
						index = key;
					}
				})
				this.getSubList(this.list[this.currentIndex],index)
				uni.setNavigationBarTitle({
					title: res.data.parent_course_name
				})
			},
			async getSubList(item,index) {
				this.currentIndex = index;
				const res = await this.$http.get(`/wechatmini/course-question-sets?course_id=${ item.course_id }`);
				this.subList = res.data;
			},
			handleClickButton(item,type) {
				if (type === 2) {
					uni.navigateTo({
						url: `/pages/inclass/index?type=${type}&id=${ item.course_question_set_id }`,
					})
					return false
				}
				uni.navigateTo({
					url: `/pages/answer/index?source=1&type=${type}&id=${ item.course_question_set_id }`
				})

			},
			onReturn() {
				uni.navigateBack()
			},
			haseStar(item) {
				return item.star_status == 1 ? true : false
			},
			haseCrown(item){
				return item.crown_status == 1 ? true : false
			},
			finishText(item) {
				if (item.is_see == 0) {
					return '未看'
				} else {
					return '已看'
				}
			},
			joinGroup(){
				uni.showToast({
					title:'该功能暂未开放！',
					icon:'none'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		height: 100%;

		.list {
			height: 100%;
			width: 200rpx;
			background-color: #e5ecda;
			overflow-y: scroll;
			-webkit-overflow-scrolling:touch;
			.item {
				color: #565421;
				margin-top: 20rpx;
				font-weight: bold;
				font-size: 26rpx;
				padding: 16rpx;
				
			}

			.item.active {
				background-color: #fceca4;
				color:#fff;
				text-shadow: 2px 2px 3px #333;
				background-size: 100%;
			}
		}

		.detail {
			width: 75%;
			background-color: #fff;
			.box {
				padding: 20rpx;
			}

			.add-wx {
				display: flex;
				background-color: #bac7cc;
				padding: 20rpx;

				.text {
					padding: 0 10rpx;

					.title {
						color: #2a4685;
						font-size: 28rpx;
					}

					.desc {
						font-size: 26rpx;
						color: #546c9a
					}
				}

				.button {
					margin-top: 30rpx
				}
			}
			.sub-list{
				background-color: #f0f0f0;
				margin-top:20rpx;
				padding:20rpx 0;
				.item {
					display: flex;
				
					.buttons {
						display: flex;
						margin-top: 20rpx;
					}
				
					.name {
						font-size: 30rpx
					}
				
					.teacher {
						fotn-size: 28rpx;
						color: #8b8b8b;
						line-height: 1;
						margin-top: 20rpx;
					}
				
					.study-status {
						margin-right: 20rpx;
						margin-left:20rpx;
						.is-finish {
							width: 80rpx;
							color: #514f1b;
							font-size: 28rpx
						}
				
						.crown-icon {
							line-height: 1;
				
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
				
						.star-icon {
							line-height: 1;
							margin-bottom: 10rpx;
				
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				
				}
			}
			
		}

		.return-button {
			position: fixed;
			right: 20rpx;
			bottom: 20rpx;
			background-color: #939acd;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 50%
		}
	}

	/deep/ .u-button {
		margin-right: 20rpx;
		border-radius: 40rpx !important;
	}
</style>
